import { FC, useCallback, useContext, useState } from 'react';
import { Input, Button } from 'antd';
import { WrapContext } from './wrap';

// 业务码
const enum BusinessCode {
  problem = '10001', // 读题阶段AI导师题目理解情况的提问，需要 UI 交互
  code = '10002', // 编程阶段AI导师题目理解情况的提问，需要 UI 交互
  test = '10003', // 测试阶段代码提交次数超限，询问是否看答案，需要 UI 交互
}

const InputCom: FC = () => {
  const { TextArea } = Input;
  const context = useContext(WrapContext);
  const [msg, setMsg] = useState<string>('');
  // 发送消息
  const handleSendMsg = () => {
    // 发送websocket消息
    context?.sendMsg({
      topic: 'chat',
      data: msg,
    });
    // 发送输入事件到chatCom组件
    context?.event.run('input-msg', msg);
    setMsg('');
  };
  // 修改数据
  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setMsg(e.target.value);
  };

  // 根据websocket消息展示提示框
  const [Tips, setTips] = useState<null | 'problem' | 'code' | 'test'>(null);
  // problem阶段中临时打开输入框
  const [isShowInput, setIsShowInput] = useState<boolean>(false);
  // 接收来自websocket的消息
  // 显示ui提示
  const receiveWS = useCallback((msg: unknown) => {
    const _msg = msg as unknown as RECE_MSG_TYPE;
    // 聊天消息处理
    if (_msg.topic === 'chat') {
      // 读题阶段
      if (_msg.code === BusinessCode.problem) {
        setTips('problem');
        setIsShowInput(true);
        // 编程阶段
      } else if (_msg.code === BusinessCode.code) {
        setTips('code');
        // 测试阶段
      } else if (_msg.code === BusinessCode.test) {
        setTips('test');
      }
    }
  }, []);
  context?.ws?.addEvent(receiveWS);

  // 回复提示框信息
  const replyTips = useCallback(
    (msg: SEND_MSG_TYPE) => {
      // 发送websocket消息
      context?.sendMsg(msg);
      if (msg.topic === 'chat') {
        // 发送输入事件到chatCom组件
        context?.event.run('input-msg', msg.data);
      }
      // 提示语设置为空
      setTips(null);
    },
    [context],
  );
  const commonClass = 'flex text-black1 h-[211px] bg-white mt-[16px]';
  return (
    <>
      {/* 输入 */}
      {Tips === null &&
        ((context && ['code', 'test'].includes(context.stage)) ||
          (context?.stage === 'problem' && isShowInput)) && (
          <div
            className={
              commonClass + ' flex-col pl-[22px] pt-[22px] pr-[16px] pb-[16px]'
            }>
            <TextArea
              onInput={handleChange}
              placeholder='你想和老师说什么...'
              value={msg}
              className='overflow-hidden grow shrink-0 '
              style={{ resize: 'none' }}
            />
            <Button
              onClick={handleSendMsg}
              type='primary'
              className='w-[65px] mt-[16px] ml-[auto]'>
              发送
            </Button>
          </div>
        )}

      {/* 提示语部分 */}
      {Tips !== null && (
        <div className={commonClass + ' justify-center items-center'}>
          {/* 读题阶段 */}
          {Tips === 'problem' && (
            <>
              <Button
                className='mr-[12px]'
                onClick={() =>
                  replyTips({ topic: 'chat', data: '有没懂的地方' })
                }>
                有没懂的地方
              </Button>
              <Button
                onClick={() =>
                  replyTips({ topic: 'chat', data: '很清楚明白' })
                }>
                很清楚明白
              </Button>
            </>
          )}
          {/* 做题阶段 */}
          {Tips === 'code' && (
            <>
              <Button
                className='mr-[12px]'
                onClick={() =>
                  replyTips({
                    topic: 'chat',
                    data: '是的，有不太理解的地方',
                  })
                }>
                是的，有不太理解的地方
              </Button>
              <Button
                onClick={() =>
                  replyTips({ topic: 'chat', data: '完全理解，我正在思考' })
                }>
                完全理解，我正在思考
              </Button>
            </>
          )}
          {/* 测试阶段 */}
          {Tips === 'test' && (
            <>
              <Button
                className='mr-[12px]'
                onClick={() =>
                  replyTips({
                    topic: 'chat',
                    data: '是的，我想对着答案学习',
                  })
                }>
                是的，我想对着答案学习
              </Button>
              <Button
                onClick={() =>
                  replyTips({ topic: 'chat', data: '等等，我还想继续钻研' })
                }>
                等等，我还想继续钻研
              </Button>
            </>
          )}
        </div>
      )}
    </>
  );
};

export default InputCom;
